<template>
	<view class="content">
		<!-- 一楼 广告轮播图 -->
		
		<swiper class="swiper"
		autoplay
		circular
		:interval="4000"
		indicator-dots
		indicator-color="#ffffff"
		indicator-active-color="#00ff00"
		>
			<swiper-item>
				<image
				mode=""
				class="img"	
				src="../../static/jifen.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image
				mode=""
				class="img"	
				src="../../static/guanggao.jpg"></image>
			</swiper-item>
		</swiper>
		
		<!-- 二楼 积分数-->
		<view class="f2">
			<view class="f2-content">
				<!-- 图片 -->
				<view class="left">
					<image src="../../static/01.gif" mode="widthFix"></image>
				</view>
				<!-- 积分数 积分明细 -->
				<view class="center">
					<view class="jifen">
						<view style="font-size: 15px; font-weight: bold;">{{user.phone}}</view>
						<view style="margin-top: 30rpx;color: #656565; font-size: 15px;">{{user.integral}}积分</view>	
					</view>
				</view>
				<!-- 下单赚积分 -->
				<view class="right">
					<view class="xiadan">
						<view @click="goToappointment(1)">下单赚积分</view>
					</view>
					<view class="chakan">
						<view @click="goto('/pages/integral/integral')">查看积分明细</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 三楼 限时抢购-轮播图 -->
		<view class="f3">
			<view class="f3-swiper">
				<!-- 上层图片 -->
				<view class="f3-xian">
					<text style="color: #ffcf48; ">限时抢购 
						<text style="color: #f9f9f9; font-size: 10px; margin-left: 10rpx; font-style: normal;">甄选好物 福利限时购</text>
					</text>
				</view>
				 <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				 	<swiper-item v-for="commodity in vipCommodityList" :key="commodity.id">
				 		<!-- 下层优惠商品 -->
				 		<view class="sp" >
				 		<!-- 左边图片 -->
				 			<view class="left">
				 				<image :src="commodity.images" mode="widthFix"></image>
				 			</view>
				 		<!-- 右边内容 -->
				 			<view class="right">
				 				<view class="jianjie">
									<text>{{commodity.name}}</text>
				 				</view>
				 				<view class="neirong">
									<view>
										<text>专享价:{{commodity.value}}积分</text>
										<view><text style="color: #737373; font-size: 10px;text-decoration: line-through;">零售价:9999积分</text></view> 
									</view>
				 					<view @click="gotoDetail(commodity)" class="qg">立即抢购</view>
				 				</view>
				 			</view>
				 		</view>
				 	</swiper-item>
				 </swiper>
			</view>
		</view>
		
		<!-- 四楼 代仍券-->
		<view class="f4">
			<view class="f4-content">
				<view class="quan">
					<text>代金券</text>
				</view>
				<view class="neirong" v-for="commodity in quanList" :key="commodity.id">
					<!-- 左边券 -->
					<view class="left">
						<image :src="commodity.images" mode="widthFix"></image>
					</view>
					<!-- 右边内容 -->
					<view class="right">
						<view class="right-shang">
							<text>{{commodity.name}}</text>
						</view>
						 <view class="right-xia">
							 <view>
							 	<text class="xian">限量100份</text>
								<view style="font-size: 10px; margin-left: 20rpx; color: #CBCBCB; margin-top: 20rpx;">{{commodity.sale}}人已购买</view>
							 </view>
							 <view class="li" @click="gotoDetail(commodity)">立即抢购</view>
						 </view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 五楼 今日推荐 -->
		<view class="f5">
			<view class="category-list">
				<scroll-view class="category-scrollview" scroll-x> 
				<!-- 商品导航条 -->
					<view class="category-item" 
					v-for="(item, index) in categoryList"
					:key="index"
					:class="{ active: item.active }"
					@click="fachCommodityList(item.id)"> {{ item.name }} </view> 
				</scroll-view> 
				<view class="goods-list">
					<!-- 商品列表 -->
					<view class="goods-item" v-for="commodity in commodityList" :key="commodity.id" @click="gotoDetail(commodity)"> 
					<!-- 商品信息展示 -->
						<image :src="commodity.images" mode="commodity.images"></image>
						<view style="display: flex;">
							<view class="name">
								<text style="background-color: #4EB37F; color: #f8f8f8; margin-right: 10rpx; border-radius: 5rpx;">商家</text>
								{{commodity.name}}
							</view>
						</view>
						<view class="price">
							<text>{{commodity.value}} <text style="font-size: 10px; margin-left: 5rpx;">积分</text></text>
							<text>已兑换:100份</text>
						</view>
						<u-divider text="" :dashed="true" lineColor="#5f5f5f"></u-divider>
						<view style="display: flex;">
							<uni-icons type="shop" size="40" color="#AEC9E0"></uni-icons>
							<view style="color: #5f5f5f;font-size: 5px;  margin-left: 10rpx; margin-top: 8rpx;">拾一块旗舰店</view>
						</view>
					</view> 
				</view> 
			</view> 
		</view>
		<Tabbar cureentPage='shopping'></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '../../components/common/Tabbar.vue';
	import {getCommodityList,getCommodityListByName,getCommodityByKeyword,getCommodityDetail,getCommodityCategoryList} from '../../common/api/product.js';
	import ShoppingApi from '@/common/FindingService/ShoppingApi.js';
	// import {upload,download} from '../../common/fileConfig/upload.js';
	export default {
		data() {
			return {
				//第一个分类
				firstCategory: {},
				//第一个分类的商品列表
				firstCategoryCommodityList: [],
				categoryId:"",
				title: '商城',
				quanList:[
					{id:1,value:990,sale:167,name:'9.9抢生活垃圾代扔券3张(不限次数)',images:'../../static/1.png'},
					{id:2,value:490,sale:234,name:'4.9抢生活垃圾代扔券(限3kg以内)',images:'../../static/2.png'}, 
				],
				// quanList:[],
				categoryList: [], // 商品分类列表
				commodityList: [], // 商品列表
				vipCommodityList: [], 
				selectedCategory:[],// 当前选中的分类项
				userId:'',
				user:{},
			}
		},
		components: {
			Tabbar
		},
		onLoad() {
			
		},
		mounted() {
			this.fetchCategoryList();// 在组件挂载时获取商品分类列表	
			// this.fetchQuanCommodityList();
			//全局变量用户ID
			this.userId = uni.getStorageSync('userId');
			this.user = uni.getStorageSync('user');
			},
		methods: {
			fetchCategoryList(){
				getCommodityCategoryList() // 调用请求方法获取商品分类列表
				.then(response => {
					this.categoryList = response.data; // 将获取到的分类列表更新到组件数据属性中
					console.log(this.categoryList);
					this.selectFirstCategory(this.categoryList); // 选中第一个分类
					
				})
				.catch(error => {
					console.error(error);
				});
			},
			
			// 调用请求方法查询商品列表
			fachCommodityList(commodityCategoryId){
				// console.log(itemId);
				// 保存 Vue 实例的引用
				var vm = this;
				uni.request({
					url: `http://43.136.172.73/api/v1/commodity/category/commodityCategoryId/${commodityCategoryId}`,
					method: 'GET',
					data: commodityCategoryId, // 直接使用commodityCategoryId作为请求参数
					header: {
						'Authorization': 'sfsdf',
					},
					success: function(res) {
						// 请求成功的回调函数
						console.log('请求成功', res.data);
						vm.commodityList = res.data;
						vm.updateActiveCategory(commodityCategoryId); // 在请求成功后更新激活项
						vm.vipCommodityList=res.data
						console.log('55:',vm.vipCommodityList)
						vm.fetchVipCommodityList()
					},
					fail: function(err) {
						// 请求失败的回调函数
						console.log('请求失败', res)
					
					},
				})
			},
			 updateActiveCategory(commodityCategoryId) {
			    this.categoryList.forEach((item) => {
			        item.active = item.id === commodityCategoryId;
			    });
			},	
			// 选中第一个分类
			selectFirstCategory(categoryList) {
			    if (categoryList.length > 0) {
			        const firstCategory = categoryList[0];
			        firstCategory.active = true; // 添加active属性，将第一个分类设为激活状态
			        this.selectedCategory = firstCategory; // 将第一个分类赋值给selectedCategory属性
			        this.fachCommodityList(firstCategory.id); // 根据第一个分类的id发送请求获取商品列表
					
			    }
			},
			// 存储会员专享的数据
			fetchVipCommodityList() {
			  getCommodityList()
			      .then(response => {
					console.log('11',response.data)
			        this.vipCommodityList = response.data.filter(commodity => this.categoryList[0].name === '会员专享');  // 将获取到的会员专享商品列表更新到vipCommodityList数组中
			        console.log('会员专享：', JSON.parse(JSON.stringify(this.vipCommodityList)));// 这里会员的
					// console.log(response.data)
					
			      })
			      .catch(error => {
			        console.error(error);
			      });
			  },
			/* // 存储代金券的数据
			fetchQuanCommodityList() {
			   getCommodityList()
			      .then(response => {
					 this.quanList = response.data.filter(commodity => this.categoryList[5].name ==='代金券');  
			        console.log('代金券：', JSON.parse(JSON.stringify(this.quanList)));
					// console.log('代金券',this.quanList)
			      })
			      .catch(error => {
			        console.error(error);
			      });
				
			  }, */
			onClickItem(e) {
			      if (this.current != e.currentIndex) {
			        this.current = e.currentIndex;
			      }
			},
			goto(images){
				uni.navigateTo({
				   url: images
				})
			},
			goToappointment(type){
				uni.navigateTo({
					url: '/pages/appointment/appointment?type=' + type
				});
			},
			gotoDetail(commodity){
				
					if(!this.user){
						uni.navigateTo({
						 url:'../login/login'
						})
					}
					else{
						uni.navigateTo({
						url: '/pages/panicBuying/panicBuying?id=' + commodity.id + '&name=' + commodity.name + '&value=' + commodity.value + '&images=' + commodity.images+'&category'
					});
					}
					
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color:#f5f5f5;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.swiper{
		height: 300rpx;
		width: 96%;
		margin-top: 30rpx;
	}
	.swiper .img{
		width: 94%;
		height: 100%;
		margin-left:20rpx;
		border-radius: 15rpx;
	}
	.f2{
		width: 94%;
		margin-top: 30rpx;// 上方的外间距
		background-color: white;
		border-radius: 10rpx;
		padding-left: 20rpx;
		padding-right: 30rpx;
		
		.f2-content{
			display: flex;
			margin-top: 20rpx;
			
			.left{
				flex: 1;
				width: 200rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
			.center{
				flex: 1;
				margin-left: 12rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 15px;
				margin-top: 10rpx;
				
			}
			.right{
				flex: 1;
				margin-left: 15rpx;
				.xiadan{
					color: #33AC77;
					font-size: 20px;
					font-weight: bold;
				}	
				.chakan{
					// font-size: 5px;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					margin-left: 30rpx;
					
				}
			}
		}
	}
	.f3{
		margin-top: 30rpx;
		width: 94%;
		border-radius: 15rpx;
		.f3-xian{
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			height: 60rpx;
			background-color: #ff5722;
			padding-left: 20rpx;
			border-radius: 10rpx;
			font-style: italic;
		}
		
		.f3-swiper .img{
			width: 100%;
			border-radius: 10rpx;
		}
		.f3-swiper .sp{
			display: flex;
			width:94%;
			margin-left: 10rpx;
			.left{
				flex: 1;
				>image{
					width: 230rpx;
					margin-top: $uni-spacing-row-base;
				}
			} 
			.right{
				margin-top: 15rpx;
				.jianjie{
					line-height: 2rem;
					font-size: $uni-font-size-lg;
					font-weight: bold;
					margin-left: 10rpx;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					word-wrap: break-word;
					white-space: normal !important;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.neirong{
					display: flex;
					margin-top: 20rpx;
					display: flex;
					color: #E74833;
					margin-left: 10rpx;
					.qg{
						width: 130rpx;
						background-color: #D2413F;
						color: #f8f8f8;
						margin-left: 100rpx;
						margin-top: 30rpx;
						padding: 10rpx;
					}
				}
			} 
			
		}
	}
	.f4{
		margin-top: 10rpx;
		padding-left: 20rpx;
		flex-direction: column;// 弹性容器的主轴方向：纵向
		width: 94%;
		background-color: white;
		border-radius: 20rpx;
		
		.f4-content{
			.quan{
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				font-size: 20px;
				font-weight: bold;
			}
			.neirong{
				display: flex;
				.left >image{
					width: 100rpx;
					margin-top: $uni-spacing-col-lg;
				}
				.right{
					margin-top: 15rpx;
					.right-shang{
						line-height: 50rpx;
						font-weight: bold;
						margin-left: 20rpx;
					}
					.right-xia{
						display: flex;
						margin-top: 20rpx;
						.xian{
							color: #4EB37F;
							margin-left: 20rpx;
							border: 1px solid #4EB37F;
							border-radius: 5rpx;
						}
						.li{
							width: 130rpx;
							color: #2E7D32;
							background-color: #4EB37F;
							font-weight: bold;
							border-radius: 10rpx;
							margin-left: 100rpx;
							height: 50rpx;
							margin-top: 10rpx;
							padding:10rpx;
						}
					}
				}
			}
		}
	}
	.f5{
		width: 94%;
		margin-top: 20rpx;
		background-color: #f8f8f8;
		border-radius: 10rpx;
		
		.category-list {
			flex: 1; 
		} 
		.category-scrollview { 
			
			white-space: nowrap; 
		} 
		.category-item { 
			flex: 1;
			display: inline-block; 
			padding: 10rpx 10rpx;
			background-color: #f8f8f8; 
			margin-right: 20rpx; 
			color: #333; 
			font-size: 28rpx; 
		} 
		.active{
			color: #1CA967;
			font-size: 20px;
		}
		.goods-list { 
			padding: 0 10rpx;
			//显示在一行
			display: flex;
			//自动换行
			flex-wrap: wrap;
			//两侧帖边对齐
			justify-content: flex-start;
		} 
		.goods-item { 
			background-color: #fff;
			margin: 5rpx 5rpx;
			width: 335rpx;
			//防止盒子被撑大
			box-sizing: border-box;
			padding: 15rpx;
			image{
				border-radius: 10rpx;
				width: 100%;
				height: 150px;
				//把图片设置成块元素，才让用margin设置居中
				display: block;
				margin: 0 auto;
			}
			
			.price{
				font-size: 18px;
				color:#4EB37F;
				//选择第二个价格
				text:nth-child(2){
					flex: 1;
					font-size: 5px;
					color: #656565;
					//离左边数字的距离
					margin-left: 40rpx;
				}
			}
					
			.name{
				line-height: 2rem;
				padding-bottom: 15rpx;
				padding-top: 10rpx;
				display: -webkit-box;
				overflow: hidden;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		} 
	}
</style>
